<template>
  <div class="real-time">
    <div class="time clear">
      <span id="h1">{{time.h1}}</span>
      <span id="h2">{{time.h2}}</span>
      <strong>:</strong>
      <span id="m1">{{time.m1}}</span>
      <span id="m2">{{time.m2}}</span>
      <strong>:</strong>
      <span id="s1">{{time.s1}}</span>
      <span id="s2">{{time.s2}}</span>
    </div>
    <div class="date">{{time.currentime}}</div>
  </div>

</template>

<script>
export default {
  name: 'setRealTime',
  data () {
    return {
      time: {}
    }
  },
  mounted () {
    setInterval(() => {
      this.getRealTime()
    }, 1000)
  },
  methods: {
    getRealTime () {
      const weekDayLabels = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      const Hours = now.getHours().toString()
      const Minutes = now.getMinutes().toString()
      const Second = now.getSeconds().toString()
      let h1 = '0'
      let m1 = '0'
      let s1 = '0'
      let h2, m2, s2
      if (Hours > 9) {
        h1 = Hours.substring(0, 1)
        h2 = Hours.substring(1, 2)
      } else {
        h1 = '0'
        h2 = Hours
      }
      if (Minutes > 9) {
        m1 = Minutes.substring(0, 1)
        m2 = Minutes.substring(1, 2)
      } else {
        m1 = '0'
        m2 = Minutes
      }
      if (Second > 9) {
        s1 = Second.substring(0, 1)
        s2 = Second.substring(1, 2)
      } else {
        s1 = '0'
        s2 = Second
      }
      const currentime = year + '年' + month + '月' + day + '日 ' + weekDayLabels[now.getDay()]

      this.$set(this.time, 'h1', h1)
      this.$set(this.time, 'h2', h2)
      this.$set(this.time, 'm1', m1)
      this.$set(this.time, 'm2', m2)
      this.$set(this.time, 's1', s1)
      this.$set(this.time, 's2', s2)
      this.$set(this.time, 'currentime', currentime)
    }
  }
}
</script>

<style lang="scss" scoped>
  .time {
    margin: 0px auto;
    width: 434px;
    padding-top: 40px;
    font-family: "黑体";

    span {
      background: url(../../../../assets/home/time_bg.png) no-repeat;
      width: 56px;
      height: 95px;
      float: left;
      display: inline;
      text-align: center;
      line-height: 95px;
      font-size: 72px;
      color: #000;
    }

    strong {
      float: left;
      display: inline;
      width: 40px;
      text-align: center;
      height: 95px;
      line-height: 95px;
      font-size: 72px;
      color: #000;
    }
  }

  .date {
    text-align: center;
    margin: 0px auto;
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
  }
</style>
